<template>
	<view class="info_box">
		<view class="u-flex u-row-between">
			<view class="u-flex u-flex-1 u-col-top">
				<u-image width="120" height="120" shape="circle"
					:src="userData.head_img"
					mode="" />
				<view class="u-m-l-20 u-color-gray">
					<view class="u-flex">
						<view class="u-font-bold u-font-34 u-m-r-10 u-color-black">{{userData.name}}</view>
						<!-- <view class="u-m-r-10" v-if="![0,'0'].includes(userData.sex)">
							<u-icon size="32" :color="userData.sex == 1 ? '#4399FF' : '#FF69B1'"
								:name="userData.sex == 1 ? 'nanxing' : 'nvxing'" custom-prefix="custom-icon" />
						</view> -->
						<view class="u-m-r-10" v-if="userData.is_authentication == 2">
							<u-icon size="32" color="#FB6316" name="renzheng" custom-prefix="custom-icon" />
						</view>
						<view class="u-m-r-10" v-if="userData.is_company_user == 1">
							<u-icon size="32" color="#F8494D" name="qiye1" custom-prefix="custom-icon" />
						</view>
						<view class="u-tag-box" :class="userData.president_class" v-if="userData.president_name">
							{{userData.president_name}}
						</view>
					</view>
					<view class="u-m-t-5 u-font-26 u-font-666">
						<span>{{userData.company}}</span>
					</view>
					<view class="u-m-t-5 u-font-26 u-font-666 u-flex" @click="onShare">
						<view>{{userData.position}}</view>
						<view class="share_tag">分享名片</view>
					</view>
				</view>
			</view>
			<!-- <view class="info_code_box" @click="goEnergyList">
				<view class="u-font-40 u-font-bold u-color-white">{{userData.number}}</view>
				<view class="u-color-white">能量值</view>
			</view> -->
			<view class="u-m-t-10 u-color-puce u-font-desc" @click="goEditInfo">修改信息 ></view>
		</view>
		<view class="u-flex u-row-between info_gold">
			<!-- <view class="u-flex-1 u-flex">
				<view class="u-border-right u-p-r-30">
					<view class="u-font-24 u-color-white">当前积分</view>
					<view class="u-font-38 u-font-bold u-m-t-4 u-color-gold">{{userData.integral}}</view>
				</view>
				<view class="u-m-l-30 u-color-white u-font-24" style="height: 86rpx;">
					<view>更多积分规则</view>
					<view class="u-m-t-10">点击查看详情</view>
				</view>
			</view>

			<view class="info_point">立即购买 ></view> -->
			<view class="u-text-center" @click="toRecharge(1)">
				<view>积分</view>
				<view class="u-m-t-10 u-font-38 u-font-bold">{{userData.integral}}</view>
			</view>
			<view class="u-text-center" @click="toRecharge(2)">
				<view>收入</view>
				<view class="u-m-t-10 u-font-38 u-font-bold">{{userData.holder.num}}</view>
			</view>
			<view class="u-text-center" @click="toRecharge(3)">
				<view>能量</view>
				<view class="u-m-t-10 u-font-38 u-font-bold">{{userData.number}}</view>
			</view>
			<view class="u-text-center" @click="toRecharge(4)">
				<view>邀请</view>
				<view class="u-m-t-10 u-font-38 u-font-bold">{{userData.holder.inviter_num}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["userData"],
		methods: {
			toRecharge(val) {
				this.$emit("toRecharge",val)
			},
			onShare(){
				this.$emit("onShare")
			},
			goEditInfo() {
				uni.navigateTo({
					url: "/pages/register/register?isEdit=1"
				})
			},
			goEnergyList() {
				uni.navigateTo({
					url: "/operate/energyList/energyList"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info_box {
		// background: #126AEC;
		padding: 30rpx 25rpx 0 25rpx;

		.info_code_box {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			background: #FB6611;
			border-radius: 50%;
			position: absolute;
			right: 30rpx;
			animation: circle-opacity 2s infinite;
		}


		@keyframes circle-opacity {
			0% {
				box-shadow: 0 0 0 0rpx #FBE8DA;
			}

			50% {
				box-shadow: 0 0 0 30rpx #FBE8DA;
			}

			100% {
				box-shadow: 0 0 0 0rpx #FBE8DA;
			}
		}

		.info_gold {
			margin-top: 30rpx;
			padding: 24rpx 60rpx 24rpx 60rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			color: #F0D2B1;
			background: linear-gradient(to bottom, #474954, #32323D);
		}

		.info_point {
			padding: 10rpx 20rpx;
			border-radius: 50rpx;
			color: #B24911;
			font-weight: bold;
			background: linear-gradient(to bottom, #FEE8D2, #F7BFAA);
		}
	}

	.share_tag {
		border: 1rpx solid #B3723E;
		color: #B3723E;
		font-size: 22rpx;
		margin-left: 30rpx;
		padding: 0 10rpx;
		border-radius: 10rpx;
	}
</style>